<template>
    <div class="staff-detail">
      <!-- 导航栏 -->
      <van-nav-bar class="page-nav-bar" title="家政平台">
        <van-icon slot="left" name="arrow-left" @click="$router.back()" />
      </van-nav-bar>
      <!-- 月嫂信息 -->
      <van-cell-group>
        <van-cell title="">
          <template slot="label">
            <van-row>
              <van-col span="8">
                <van-image
                  width="77"
                  height="72"
                  :src="data.staffPhoto"
                />
              </van-col>
              <van-col span="16">
                <van-row type="flex" justify="space-between">
                  <van-col><p>{{data.name}}</p></van-col>
                  <van-col><follow-item :follow-id="followId" :follow-name="'staff'" /></van-col>
                </van-row>
                <van-tag plain type="primary" color="#7232dd" class="tag" round>{{data.tag && data.tag[0]}}</van-tag>
                <p>{{data.address}}</p>
              </van-col>
            </van-row>
          </template>
        </van-cell>
        <van-cell>
          <van-row>
            <van-col><p class="company">注册公司：{{data.company}}</p></van-col>
          </van-row>
          <van-row>
            <van-col><span class="company">职业：</span><span v-for="(item, index) in data.occupation" :key="index" class="company"> {{item}} </span></van-col>
          </van-row>
        </van-cell>
        <van-cell>
          <van-row type="flex" justify="space-between" align="center">
            <van-col class="identity">
              <van-icon name="passed" size="20px" color="green"/>
              <span class="message">身份信息已核实</span>
            </van-col>
            <van-col>
              <van-row>
                <van-tag plain type="primary" class="contact" color="#7232dd" round  @click="showWeixin=true">电话联系</van-tag>
              </van-row>
              <van-row>
                <van-tag plain type="primary" class="contact" color="#7232dd" round  @click="showNumber=true">微信联系</van-tag>
              </van-row>
            </van-col>
          </van-row>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="subject">
        <!-- 主要技能 -->
        <van-row>
          <van-cell><h6 class="skill">主要技能</h6></van-cell>
        </van-row>
        <van-row>
          <van-cell>
            <van-tag v-for="(item, index) in data.skill" :key="index" plain type="primary" class="Key-skills" color="#7232dd" round>{{item}}</van-tag>
          </van-cell>
        </van-row>
        <!-- 个人简介 -->
        <van-row>
          <van-cell><h6 class="skill">个人简介</h6></van-cell>
        </van-row>
        <van-row>
          <van-cell>
            <p class="introduce">{{data.introduce}}</p>
          </van-cell>
        </van-row>
        <!-- 个人信息 -->
        <van-row>
          <van-cell><h6 class="skill">个人信息</h6></van-cell>
        </van-row>
        <van-row>
          <van-cell>
            <p class="information">任职公司：{{data.company}}</p>
            <p class="information">籍贯民族：{{data.nation}}</p>
            <p class="information">生肖属相：{{data.chineseZodiac}}</p>
            <p class="information">星座：{{data.constellation}}（12.22~1.19）</p>
            <p class="information">出生日期：{{data.birthday}}</p>
            <p class="information">学历：{{data.education}}</p>
          </van-cell>
        </van-row>
        <!-- 证件信息 -->
        <van-row>
          <van-cell><h6 class="skill">证件信息</h6></van-cell>
        </van-row>
        <van-cell>
          <van-row class="img-wrap" type="flex" justify="space-around">
            <van-col :span="6" v-for="(item, index) in data.information" :key="index">
              <van-image :src="item" fit="contain" />
            </van-col>
          </van-row>
        </van-cell>
        <van-row>
          <van-cell><h6 class="skill">评论列表</h6></van-cell>
        </van-row>
        <!--comment-list 评论列表-->
        <comment-list ref="commenlist" />
      </van-cell-group>
      <!-- 尾部评论分享 -->
      <van-tabbar v-model="active">
        <van-tabbar-item icon="chat-o" @click="showEvaluate=true">评价</van-tabbar-item>
        <van-tabbar-item icon="share-o" @click="showShare=true">分享</van-tabbar-item>
        <van-tabbar-item icon="wechat" @click="showWeixin=true">微信联系</van-tabbar-item>
        <van-tabbar-item icon="phone" @click="showNumber=true">电话联系</van-tabbar-item>
      </van-tabbar>
      <!-- 评价弹出层 -->
      <van-popup v-model="showEvaluate" position="bottom" :loading="loading" :style="{ height: '70%' }">
        <van-nav-bar title="标题" left-text="返回" left-arrow>
          <template #right>
            <van-icon name="cross" size="18" @click="showEvaluate=false"/>
          </template>
        </van-nav-bar>
        <van-cell>
          <van-field
            v-model="message"
            rows="2"
            autosize
            label="留言"
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
          />
        </van-cell>
        <van-button class="post-btn" @click="release">发布</van-button>
      </van-popup>
      <!-- 分享 -->
      <van-cell title="显示分享面板" @click="showShare = true" />
      <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
      <!-- 动作面板 -->
      <van-action-sheet v-model="showWeixin" :actions="action1" @select="onSelect" />
      <van-action-sheet v-model="showNumber" :actions="action2" @select="onSelect" />
  </div>
</template>

<script>
import { getStaffDetail, getStaffs } from '@/api/staff'
import { postComment } from '@/api/comment'
import commentList from './components/comment-list.vue'

export default {
  components: { commentList },
  name: 'StaffDetail',
  data () {
    return {
      active: 0,
      showEvaluate: false, // 评论
      message: '',
      showShare: false, // 分享
      data: {}, // 页面数据
      followId: this.$route.params.id - 0,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      showWeixin: false, // 微信号面板
      action1: [{ name: '微信号:' }, { name: '123456789' }],
      showNumber: false, // 微信号面板
      action2: [{ name: '手机号:' }, { name: '123456789' }],
      loading: false
    }
  },
  created () {
    this.loadStaffDetail()
  },
  mounted () {},
  methods: {
    async loadStaffDetail () {
      const info = await getStaffs({ id: this.followId })
      const detail = await getStaffDetail({ id: this.followId })
      this.data = { ...info, ...detail }
      console.log(this.data)
    },
    async release () {
      this.loading = true
      await postComment({
        value: this.message,
        name: this.$store.state.user.username,
        avatar: this.$store.state.user.avatar
      })
      this.loading = false
      this.$refs.commenlist.getComment()
      this.$toast.success('发表成功')
      this.showEvaluate = false
    },
    onSelect () {}
  }
}
</script>

<style scoped lang="less">
.staff-detail {
  .post-btn {
    width: 150px;
    border: none;
    padding: 0;
    color: #6ba3d8;
    float: right;
  }
  p, h6{
    margin: 0;
  }
  .tag {
    margin-bottom: 25px;
    padding: 5px 20px;
  }
  .van-button {
    width: 126px;
  }
  .company {
    font-size: 24px;
    color: #9C979191;
  }
  .identity {
    display: flex;
    justify-content: space-between;
    align-content: center;
    font-weight: bold;
    font-size: 28px;
    color: #000000;
  }
  .subject {
    margin-top: 20px;
    margin-bottom: 40px;
    .contact {
      padding: 4px 20px;
    }
    .Key-skills {
      padding: 8px 20px;
      margin: 0px 10px 10px;
    }
    .introduce {
      font-size: 24px;
      color: #7B7777;
      margin: 0 30px 0px 52px;
    }
    .information {
      font-size: 24px;
      color: #7B7777;
      margin: 0 30px 0px 52px;
    }
  }
  .img-wrap {
    .van-image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
